<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>tag datalist | Tag html | Học web chuẩn</title>
<meta name="description" content="Tag datalist định nghĩa một danh sách tùy chọn, tag datalist được sử dụng cùng với các thành phần input nhằm xác định giá trị các thành phần input có thể có (tương tự như select - option). - Học web chuẩn" />
<meta name="keywords" content="học web chuẩn,web standard,thẻ datalist,tag datalist,tag datalist html5,the datalist,datalist,thuộc tính,css3,học html,học xhmlt,học css,học css3,web chuẩn,thiết kế web,thiet ke web" />
<?php include $_SERVER['DOCUMENT_ROOT'].'/common/include/inc_link_script.php'; ?>
</head>

<body>
<div id="layout">
<?php include $_SERVER['DOCUMENT_ROOT'].'/common/include/header.php'; ?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/common/include/gnav.php'; ?>

<ul class="topicPath">
<li><a href="/">Trang chủ</a></li>
<li><a href="/reference/">Tham khảo</a></li>
<li><a href="/reference/tag/">Tag html</a></li>
<li><a href="/reference/tag/html5/">html5</a></li>
<li class="last">&lt;datalist&gt;</li>
</ul>

<h2 class="bHead">&lt;datalist&gt;</h2>

<div id="pageBody">
<div id="content">
<div class="section">
<div class="define">
<h3 class="mHead">Định nghĩa và sử dụng</h3>
<ul class="text">
<li>Tag &lt;datalist&gt; định nghĩa một danh sách tùy chọn.</li>
<li>Tag &lt;datalist&gt; được sử dụng cùng với các thành phần <a href="tag_input.php">&lt;input /&gt;</a> nhằm xác định giá trị các thành phần &lt;input /&gt; có thể có (tương tự như <a href="tag_select.php">&lt;select&gt;</a> - <a href="tag_option.php">&lt;option&gt;</a>).</li>
<li>Sử dụng thuộc tính list trong &lt;input /&gt; để cho biết thành phần &lt;input /&gt; nào liên quan đến &lt;datalist&gt;.</li>
</ul>
<div class="difference">
<h4 class="sHead">Sự khác nhau giữa HTML4.01 và HTML5</h4>
<table class="mt10">
<tr>
<th>HTML4.01</th>
<th class="w50p">HTML5</th>
</tr>
<tr>
<td>&#9679; Không hỗ trợ</td>
<td>&#9679; Đây là tag mới trong HTML5</td>
</tr>
</table>
</div>
</div>

<div class="structure">
<h3 class="mHead">Cấu trúc</h3>
<div class="sourceTxt">
<p>&lt;input list=&quot;datalistID&quot; /&gt;<br />
&lt;datalist id=&quot;datalistID&quot;&gt;<br />
&lt;option value=&quot;&quot;&gt;&lt;/option&gt;<br />
&lt;/datalist&gt;</p>
</div>
</div>

<div class="example">
<div class="headSection">
<h3 class="mHead">Ví dụ</h3>
<p><a href="../example/ex_datalist.html" target="_blank">Xem ví dụ</a></p>
</div>
<h4 class="sHead">Html viết:</h4>
<div class="sourceTxt">
<p>&lt;input list=&quot;html&quot; /&gt;<br />
&lt;datalist id=&quot;html&quot;&gt;<br />
&lt;option value=&quot;Học HTML&quot;&gt;&lt;/option&gt;<br />
&lt;option value=&quot;Tham khảo HTML&quot;&gt;&lt;/option&gt;<br />
&lt;option value=&quot;Ví dụ HTML&quot;&gt;&lt;/option&gt;<br />
&lt;option value=&quot;Thực hành HTML&quot;&gt;&lt;/option&gt;<br />
&lt;/datalist&gt;</p>
</div>
</div>

<div class="supportBrowser">
<h3 class="mHead">Trình duyệt hỗ trợ</h3>
<p>Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ &lt;datalist&gt;:</p>
<p><strong>Trình duyệt dành cho PC:</strong></p>
<ul class="browserList">
<li><img src="/common/images/ico_ie_a.gif" alt="Internet Explorer" /><span>10</span></li>
<li><img src="/common/images/ico_firefox_a.gif" alt="Firefox" /><span>4</span></li>
<li><img src="/common/images/ico_opera_a.gif" alt="Opera" /><span>10</span></li>
<li><img src="/common/images/ico_chrome_a.gif" alt="Google Chrome" /><span>20</span></li>
<li><img src="/common/images/ico_safari.gif" alt="Safari" /><span class="gray">6</span></li>
</ul>
<p>Tag &lt;datalist&gt; được hỗ trợ trong một số trình duyệt, tuy nhiên vẫn chưa được hỗ trợ bởi trình duyệt Safari.</p>
</div>

<div class="supportBrowser">
<h3 class="mHead">Thiết bị hỗ trợ</h3>
<p>Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ &lt;datalist&gt;:</p>
<h4 class="tHead">ĐIỆN THOẠI (SMARTPHONE)</h4>
<p><strong>Hệ điều hành</strong></p>
<ul class="browserList mb10">
<li><img src="/common/images/ico_windowphone_a.gif" alt="Window Phone" /><span>8</span></li>
</ul>

<p><strong>Trình duyệt</strong></p>
<ul class="browserList">
<li><img src="/common/images/ico_firefox_a.gif" alt="firefox mobile" /><span>8</span></li>
<li><img src="/common/images/ico_opera_a.gif" alt="Opera mobile" /><span>10</span></li>
</ul>

<h4 class="tHead">MÁY TÍNH BẢNG (TABLETS)</h4>
<p><strong>Hệ điều hành</strong></p>
<p class="mb10">Chưa có hệ điều hành tablets nào hỗ trợ thẻ này.</p>

<p><strong>Trình duyệt</strong></p>
<ul class="browserList">
<li><img src="/common/images/ico_firefox_a.gif" alt="firefox mobile" /><span>10</span></li>
<li><img src="/common/images/ico_opera_a.gif" alt="Opera mobile" /><span>11</span></li>
</ul>
</div>

<div class="attribute">
<h3 class="mHead">Thuộc tính</h3>
<p>Cách sử dụng: &lt;datalist thuoctinh=&quot;giatri&quot;&gt;&lt;/datalist&gt;</p>

<h4 class="sHead"><a href="attr_global.php">Thuộc tính Tổng quát</a> và <a href="attr_event.php">thuộc tính sự kiện</a></h4>
<p>Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5</p>
</div>

<div class="referLink">
<h3 class="mHead">Link liên quan</h3>
<ul>
<li><a href="tag_input.php">&lt;input /&gt;</a></li>
<li><a href="tag_select.php">&lt;select&gt;&lt;/select&gt;</a></li>
<li><a href="tag_option.php">&lt;option&gt;&lt;/option&gt;</a></li>
</ul>
</div>
<!-- / class section --></div>

<div class="sectionLink">
<p class="back"><a href="tag_command.php">Tag trước</a></p>
<p class="prev"><a href="tag_dd.php">Tag kế tiếp</a></p></div>
<!-- / id content --></div>

<?php include $_SERVER['DOCUMENT_ROOT'].'/common/include/sidebar_html5.php'; ?>
<!-- / id pageBody --></div>

<?php include $_SERVER['DOCUMENT_ROOT'].'/common/include/footer.php'; ?><!-- / id layout --></div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22625099-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>